import React from 'react';
import styles from '../style.less';
import { Grid } from 'antd-mobile';
import { InbizIcon, webDataSourceClick } from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import { TextWidget } from '@inbiz/react';

const justifyContentArr = {
  left: 'flex-start',
  center: 'center',
  right: 'flex-end'
}

export default function DefaultGrid(props: any) {
  const {
    newDataSource,
    contentType,
    fontSize,
    titleColor = 'rgba(0,0,0,1)',
    radius,
    mobilerowCount,
    horizontalGutter,
    verticalGutter,
    gridHeight,
    colHeight,
    showType = 'grid',
    itemWidth,
    cardBackground,
    cardBoxshadow,
    cardBorder,
    rowCount,
    textAlign,
    position,
    descFontSize,
    descColor = 'rgba(235,235,235,1)'
  } = props;

  const history = useInbizRouter();

  // 自适应样式，grid布局
  let commonStyle = {
    height: colHeight ?? gridHeight,
    borderRadius: radius ? radius : '',
    boxShadow: cardBoxshadow
  }

  // 非自适应样式
  let listCommonStyle = {
    height: colHeight ?? gridHeight,
    borderRadius: radius ? radius : '',
    boxShadow: cardBoxshadow,
    width: itemWidth,
  }

  let positionStyle = {
    display: 'flex',
    width: '100%',
    height: '100%',
    alignItems: "center",
    padding: 5,
    justifyContent: "center",
    flexDirection: position == 'left' ?
      'row' : position == 'right' ?
        'row-reverse' : position == 'top' ?
          'column' : position == 'bottom' ?
            'column-reverse' : 'column'
  }


  let fontStyle = {
    fontSize: fontSize,
    color: titleColor,
    textAlign: textAlign
  }

  let descStyle = {
    fontSize: descFontSize,
    color: descColor
  }

  const isSeprationGrid = contentType == '4';
  const isIconShow = !(contentType === 2 || (contentType == 1 && position === ''));

  let ItemCommonStyle: any = {};
  let ItemFontStyle: any = {};
  let ItemDescStyle: any = {};


  return showType === 'grid' ? (
    <Grid
      columns={rowCount ?? mobilerowCount ?? 2}
      gap={[horizontalGutter, verticalGutter]}
    >
      {newDataSource.map((item: any) => {

        ItemCommonStyle = {
          backgroundColor: item?.blockBackgroundColor,
          ...commonStyle
        }

        ItemDescStyle = {
          ...descStyle
        }

        ItemFontStyle = {
          ...fontStyle,
          marginRight: position === 'left' && item.icon?.type ? 10 : 0,
          marginLeft: position === 'right' && item.icon?.type ? 10 : 0
        }

        if (item.cardStyle) {
          ItemCommonStyle = {
            ...ItemCommonStyle,
            ...item.cardBackground,
            ...item.cardBorder,
            boxShadow: item.cardBoxshadow ?? cardBoxshadow,
          }

          ItemFontStyle = {
            ...fontStyle,
            fontSize: item.nameFontSize ?? fontSize,
            color: item.nameColor ?? item.titleColor ?? titleColor,
            marginRight: position === 'left' && item.icon?.type ? 10 : 0,
            marginLeft: position === 'right' && item.icon?.type ? 10 : 0
          }

          ItemDescStyle = {
            ...descStyle,
            fontSize: item.describeFontSize ?? descFontSize,
            color: item.describeColor ?? descColor
          }
        } else {
          ItemCommonStyle = {
            ...ItemCommonStyle,
            ...cardBackground,
            ...cardBorder,
          }
        }

        return (
          <Grid.Item
            key={item.id}
            className={styles.gridItem}
            style={
              isSeprationGrid ? {
                flexDirection: 'column',
                justifyContent: 'flex-start'
              } : ItemCommonStyle
            }
            onClick={() => {
              props.emit && props.emit('onclick', item);
              webDataSourceClick(history, item);
            }}

          >
            <>
              <div
                // @ts-ignore
                style={isSeprationGrid ? {
                  ...positionStyle,
                  ...ItemCommonStyle,
                } : {
                  ...positionStyle
                }}
              >
                {isIconShow && item.icon?.type && (
                  <InbizIcon
                    className={styles.item_icon}
                    type={item.icon?.type || ''}
                    style={{
                      color: item.icon?.color || '#999',
                      fontSize: item.icon?.size || '24px',
                      minWidth: item.icon?.size || 24,
                    }}
                  />
                )}
                {contentType !== 3 && !isSeprationGrid && (
                  <p style={ItemFontStyle}>
                    <span>
                      <TextWidget>{item.title}</TextWidget>
                    </span>
                    <br></br>
                    <div style={{ display: 'flex', justifyContent: justifyContentArr[ItemFontStyle.textAlign as 'left' | 'center' | 'right'] || 'center' }}>
                      <span style={{ ...ItemDescStyle, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        <TextWidget>{item.describe}</TextWidget>
                      </span>
                    </div>
                  </p>
                )}
              </div>

              {
                isSeprationGrid && (
                  <p style={{ ...ItemFontStyle, textAlign: 'center', marginTop: 5 }}>
                    <span>
                      <TextWidget>{item.title}</TextWidget>
                    </span>
                  </p>
                )
              }
            </>
          </Grid.Item>
        )
      })}
    </Grid>
  ) : (
    <div
      className={styles.navigationFlex}
      style={{
        margin: `0 -${horizontalGutter}px -${verticalGutter}px 0`,
      }}
    >
      {newDataSource.map((item: any) => {

        ItemCommonStyle = {
          backgroundColor: item?.blockBackgroundColor,
          ...listCommonStyle
        }

        ItemFontStyle = {
          ...fontStyle,
          marginRight: position === 'left' && item.icon?.type ? 10 : 0,
          marginLeft: position === 'right' && item.icon?.type ? 10 : 0
        }

        ItemDescStyle = {
          ...descStyle
        }

        if (item.cardStyle) {
          ItemCommonStyle = {
            ...ItemCommonStyle,
            ...item.cardBackground,
            ...item.cardBorder,
            boxShadow: item.cardBoxshadow ?? cardBoxshadow,
          }

          ItemFontStyle = {
            ...fontStyle,
            fontSize: item.nameFontSize ?? fontSize,
            color: item.nameColor ?? item.titleColor ?? titleColor,
            marginRight: position === 'left' && item.icon?.type ? 10 : 0,
            marginLeft: position === 'right' && item.icon?.type ? 10 : 0
          }

          ItemDescStyle = {
            ...descStyle,
            fontSize: item.describeFontSize ?? descFontSize,
            color: item.describeColor ?? descColor
          }
        } else {
          ItemCommonStyle = {
            ...ItemCommonStyle,
            ...cardBackground,
            ...cardBorder,
          }
        }

        return (
          <div
            key={item.id}
            className={styles.gridItem}
            style={
              isSeprationGrid ? {
                marginRight: horizontalGutter,
                marginBottom: verticalGutter,
                flexDirection: 'column',
                justifyContent: 'flex-start'
              } :
                {
                  ...ItemCommonStyle,
                  marginRight: horizontalGutter,
                  marginBottom: verticalGutter,
                }
            }
            onClick={() => webDataSourceClick(history, item)}
          >
            <>
              {/* @ts-ignore */}
              <div style={isSeprationGrid ? {
                ...positionStyle,
                ...ItemCommonStyle,
              } : {
                ...positionStyle
              }}>
                {isIconShow && (
                  <InbizIcon
                    className={styles.item_icon}
                    type={item.icon?.type || 'icon-inbiz_basic-settings'}
                    style={{
                      color: item.icon?.color || '#999',
                      fontSize: item.icon?.size || '24px',
                    }}
                  />
                )}
                {contentType !== 3 && !isSeprationGrid && (
                  <p style={ItemFontStyle}>
                    <span>
                      <TextWidget>{item.title}</TextWidget>
                    </span>
                    <br></br>
                    <div style={{ display: 'flex', justifyContent: justifyContentArr[ItemFontStyle.textAlign as 'left' | 'center' | 'right'] || 'center' }}>
                      <span style={{ ...ItemDescStyle, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        <TextWidget>{item.describe}</TextWidget>
                      </span>
                    </div>
                  </p>
                )}
              </div>

              {
                isSeprationGrid && (
                  <p style={{ ...ItemFontStyle, textAlign: 'center', marginTop: 5 }}>
                    <span>
                      <TextWidget>{item.title}</TextWidget>
                    </span>
                  </p>
                )
              }

            </>
          </div>
        )
      })}
    </div >
  );
}
